<template>
	<view class="Menu">

		<view class="transferBox">
			<view class="assets">
				<view class="assetsT">
					<view class="title"><!-- 我要出售 -->{{$t('otcSellout.block.title.wycs')}}</view>
					<view class="pick" @click="show = true">{{type}}
						<u-icon size="10" name="arrow-down-fill" style="margin-left: 16rpx;"></u-icon>
					</view>
				</view>
				<view class="assetsM">
					<view class="assetsInput">
						<u--input border='none' v-model="Inputmoney" @blur='blur'></u--input>
					</view>
					<view class="assetsmMoney">
						<!-- 余额 -->{{$t('otcSellout.tips.ye')}}:{{money||0}}
					</view>
				</view>
			</view>
			<view class="assets">
				<view class="assetsT">
					<view class="title">单价</view>
				</view>
				<view class="assetsM">
					<view class="assetsInput">
						<u--input border='none' v-model="unitPrice" @blur='blur1'></u--input>
					</view>
				</view>
			</view>
			<view class="usdtbl" v-if="id=='100'">
				<!-- 参考价格 -->{{$t('otcPurchase.tips.ckjg')}}:1YLD ~ {{usdtInfo.usdt_xt}}USDT
			</view>
			<view class="usdtbl" v-else-if="id=='77'">
				<!-- 参考价格 -->{{$t('otcPurchase.tips.ckjg')}}:1YLDA ~ {{usdtInfo.ylda_price}}USDT
			</view>
			<view class="usdtbl" v-else>
				<!-- 参考价格 -->{{$t('otcPurchase.tips.ckjg')}}:1YLD ~ {{usdtInfo.usdt_yld}}USDT
			</view>
			<view class="assets">
				<view class="assetsT">
					<view class="title">{{$t('otcSellout.block.title.wjsd')}}<!-- 我将收到(预估) --></view>
					<view class="pick">USDT</view>
				</view>
				<view class="assetsM">
					<view class="assetsInput">
						<view class="Inputmoney1">
							{{Inputmoney1}}
						</view>
					</view>

				</view>
			</view>

		</view>
		<view class="uni-btn">
			<button class="uni-btn-v" @click="formSubmit(2)">{{$t('otcSellout.but.sellout')}}<!-- 出售 --></button>
		</view>
		<u-picker :show="show" :columns="columns" keyName="label" @close='close' @cancel='close' @confirm='confirm'
			:closeOnClickOverlay='true'></u-picker>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				money: '',
				Inputmoney: '0',
				Inputmoney1: '0',
				show: false,
				columns: [
					[{
							label: 'YLD',
							id: 3
						},
						// {
						// 	label: 'YLDA',
						// 	id: 77
						// },
					]
				],
				type: 'YLD',
				id: '3',
				unitPrice: '0',
				usdtInfo: {},
			};
		},
		mounted() {
			this.getMoney()
			this.usdtbl()
			this.getxtyldpay()

		},
		onShow() {
			this.getMoney()
			this.usdtbl()
			this.getxtyldpay()

		},
		methods: {
			getxtyldpay() {
				uni.request({
					url: "/index/getxtyldpay",
					data: {},
					success: (res) => {
						if (res.data.status == 1) {
							this.columns = [
								[{
										label: 'YLD',
										id: 3
									},
									// {
									// 	label: 'YLDA',
									// 	id: 77
									// },
									{
										label: this.$t('otc.category.points'), //'$',
										id: 100
									},
								]
							]
						}
					},
				});
			},
			//获取余额
			getMoney() {
				uni.request({
					url: "/user/getMoney",
					method: 'POST',
					data: {
						type: this.id,
					},
					success: (res) => {
						if (res.res.code == 1) {
							this.money = res.res.data.money
						}
					},
				});
			},
			//usdt 对应 xt 和 yld 比例
			usdtbl() {
				uni.request({
					url: "/user/usdtbl",
					method: 'POST',
					success: (res) => {
						if (res.res.code == 1) {
							this.usdtInfo = res.res.data
							if (this.id == '3') {
								this.unitPrice = res.res.data.usdt_yldt_value
							} else if (this.id == '77') {
								this.unitPrice = res.res.data.usdt_ylda_value

							} else {
								this.unitPrice = res.res.data.usdt_xt_value

							}
							console.log(this.id);
						}
					},
				});
			},
			blur() {
				this.usdtblreMoney()
			},
			blur1(val) {
				this.usdtblreMoney()
			},
			//udst 转换成 yld 或 xt
			usdtblreMoney() {
				uni.request({
					url: "/user/usdtblMoney",
					method: 'POST',
					data: {
						type: this.id,
						money: this.Inputmoney,
						unit_price: this.unitPrice
					},
					success: (res) => {
						if (res.res.code == 1) {
							this.Inputmoney1 = res.res.data.re_money
						}
					},
				});
			},
			//卖出
			formSubmit() {
				uni.request({
					url: "/user/MoneyDeal",
					method: 'POST',
					data: {
						pay_type: '2',
						type: this.id,
						money: this.Inputmoney,
						unit_price: this.unitPrice
					},
					success: (res) => {
						if (res.res.code == 1) {
							this.$wanlshop.msg(res.res.msg);
							setTimeout(() => {
								this.$wanlshop.to("/pages/newPage/myOtc");
							}, 500);
						}
					},
				});
			},
			sectionChange(index) {
				this.current = index;
				this.Inputmoney = '0'
				this.Inputmoney1 = '0'
				this.getMoney()
			},
			//选择
			confirm(val) {
				this.id = val.value[0].id.toString()
				this.type = val.value[0].label
				this.show = false
				if (this.Inputmoney == '0') {
					uni.showToast({
						title: "请输入出售金额",
						icon: "none",
					});

				} else {
					this.usdtblreMoney()
				}
				this.usdtbl()
				this.getMoney()
			},
			//关闭选择
			close() {
				this.show = false
			},
		}
	};
</script>

<style lang="scss">
	.Menu {
		background: #f8f8f8;

		.content {
			display: flex;
			align-items: center;
			background: #F7F7F7;
			border-radius: 50rpx;
			padding: 4rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #666666;

			uni-view {
				width: 50%;
				border-radius: 50rpx;
			}

			.active {
				background: #FF443C;
				color: #fff;
			}
		}

		.action {
			font-size: 24rpx;
			color: #999999;
		}

		.transferBox {
			padding: 0 24rpx;

			.assets {
				padding: 38rpx 30rpx 34rpx 30rpx;
				background: #fff;
				border-radius: 16rpx;
				margin-top: 24rpx;

				.assetsT {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 20rpx;

					.title {
						font-weight: 400;
						font-size: 28rpx;
						color: #333333;
						line-height: 48rpx;
					}

					.pick {
						background: #F3F3F3;
						border-radius: 4rpx;
						padding: 5rpx 6rpx 5rpx 24rpx;
						font-weight: 400;
						font-size: 24rpx;
						color: #666666;
						line-height: 48rpx;
						min-width: 112rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
					}
				}

				.assetsM {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.assetsInput {
						width: 50%;

						/deep/.u-input__content__field-wrapper__field,
						.Inputmoney1 {
							font-weight: 600;
							font-size: 52rpx !important;
							color: #FF443C !important;
							line-height: 48rpx !important;
						}
					}

					.assetsmMoney {
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;
						line-height: 48rpx;
					}
				}
			}

			.usdtbl {
				font-weight: 400;
				font-size: 28rpx;
				color: #999999;
				line-height: 48rpx;
				margin-top: 30rpx;
			}
		}

		.uni-btn-v {
			width: 702rpx;
			height: 96rpx;
			background: #eb5641;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			margin-top: 40rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #ffffff;
			line-height: 96rpx;
			margin-top: 80rpx;
		}
	}
</style>